<template>

  <div class="login-page" :style="{backgroundImage: bgImage,}">
    <div class="login-content">
      <div style="height: 1rem;line-height:1rem;font-size: 20px;font-weight: bold;margin-bottom: 0.5rem; text-align: center;">后台管理系统</div>

      <div class="login-div" style="margin-top: 40px;">
        <el-form ref="ruleForm" :model="form" :rules="rules" label-width="40px">
          <el-form-item label="账号" prop="username">
            <el-input v-model="form.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="form.remember">记住密码</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="loading" @click="onSubmit('ruleForm')" style="width: 100%; margin-top: 20px;">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script>

    import { get, post } from '../utils/axios'
    import { login } from '@/api/user';
    import { setToken } from '@/utils/auth';

    export default {
        name: "login",
        data() {

          let username = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('账号不能为空'));
            } else {
              callback();
            }
          };
          let password = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('密码不能为空'));
            } else {
              callback();
            }
          };
          return {
            bgImage: "url(" + require("../assets/login-bg.jpg") + ")",
            form: {
              username: 'admin',
              password: 'Zcx1155070_***',
              remember: true,
            },
            rules: {
              username: [
                { validator: username, trigger: 'blur' }
              ],
              password: [
                { validator: password, trigger: 'blur' }
              ],
            },
            loading: false,

          }
        },
        mounted() {

        },
        methods: {

          // 登录按钮点击事件
          onSubmit(ruleForm) {

            // 登录按钮 小菊花
            this.loading = true;

            this.$refs[ruleForm].validate((valid) => {

              if (valid) { // 验证通过

                let params = {
                  username: this.form.username,
                  password: this.form.password,
                };

                login(params).then(res => {

                  this.loading = false;
                  setToken("Token", res.data.token);
                  this.$router.push({ path: '/' });

                }, (err) => {
                  this.loading = false;
                })
              }
            })
          },

        },


    }
</script>

<style scoped lang="less">

  .login-page {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-size: 100%;
  }
  .login-content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 360px;
    height: 450px;
    margin-top: -225px;
    margin-left: -180px;
    padding: 50px;
    background-color: rgba(36,66,117,.5);
    border-radius: 5px;
    color: #fff;
  }
  .el-form-item__label {
    color: #fff !important;
  }

</style>
